<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓氏百科 - 探索中国姓氏文化与当代杰出人物</title>
    <link rel="stylesheet" href="src/style.css">
    <script src="src/script.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <div class="logo">
            <h1>姓氏百科</h1>
        </div>
        <div class="nav-links">
            <a href="index.html">首页</a>
            <a href="family-tree.html">姓氏知识库</a>
            <a href="person-detail.html">当代族人</a>
            <a href="news.html">最新消息</a>
            <a href="about.html">关于我们</a>
        </div>
        <!-- 语言切换 -->
        <div class="language-switcher">
            <select id="languageSelect">
                <option value="zh-CN">简体中文</option>
                <option value="zh-TW">繁体中文</option>
                <option value="en">English</option>
                <option value="ja">日本語</option>
                <option value="ko">한국어</option>
                <option value="vi">Tiếng Việt</option>
                <option value="ru">Русский</option>
            </select>
        </div>
        <!-- 移动端菜单按钮 -->
        <div class="mobile-menu-btn">
            <button id="mobileMenuToggle">☰</button>
        </div>
    </nav>
    
    <!-- 移动端导航菜单 -->
    <div class="mobile-nav" id="mobileNav">
        <div class="mobile-nav-links">
            <a href="index.html">首页</a>
            <a href="family-tree.html">姓氏知识库</a>
            <a href="person-detail.html">当代族人</a>
            <a href="news.html">最新消息</a>
            <a href="about.html">关于我们</a>
            <div class="mobile-language-switcher">
                <select id="mobileLanguageSelect">
                    <option value="zh-CN">简体中文</option>
                    <option value="zh-TW">繁体中文</option>
                    <option value="en">English</option>
                    <option value="ja">日本語</option>
                    <option value="ko">한국어</option>
                    <option value="vi">Tiếng Việt</option>
                    <option value="ru">Русский</option>
                </select>
            </div>
        </div>
        <button id="mobileMenuClose">×</button>
    </div>

    <!-- 头部Banner - 导航站风格 -->
    <header class="nav-style-header" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('src/placeholder-banner.svg');">
        <div class="banner-content">
            <h2>探索中国姓氏文化</h2>
            <p>连接历史与现代，记录当代杰出族人</p>
            <div class="search-container">
                <input type="text" id="surnameSearch" placeholder="搜索姓氏...">
                <button id="searchButton">🔍</button>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main>
        <!-- 姓氏导航区域 - 导航站核心功能 -->
        <section class="surname-navigation">
            <h2>热门姓氏导航</h2>
            <div class="surname-grid">
                <a href="family-tree.html?surname=李" class="surname-card">
                    <span class="surname-char">李</span>
                    <span class="surname-desc">世界第一大姓</span>
                </a>
                <a href="family-tree.html?surname=王" class="surname-card">
                    <span class="surname-char">王</span>
                    <span class="surname-desc">主要分布华北</span>
                </a>
                <a href="family-tree.html?surname=张" class="surname-card">
                    <span class="surname-char">张</span>
                    <span class="surname-desc">传统大姓之一</span>
                </a>
                <a href="family-tree.html?surname=刘" class="surname-card">
                    <span class="surname-char">刘</span>
                    <span class="surname-desc">汉朝国姓</span>
                </a>
                <a href="family-tree.html?surname=陈" class="surname-card">
                    <span class="surname-char">陈</span>
                    <span class="surname-desc">南方大姓</span>
                </a>
                <a href="family-tree.html?surname=杨" class="surname-card">
                    <span class="surname-char">杨</span>
                    <span class="surname-desc">弘农杨氏</span>
                </a>
                <a href="family-tree.html?surname=赵" class="surname-card">
                    <span class="surname-char">赵</span>
                    <span class="surname-desc">宋朝国姓</span>
                </a>
                <a href="family-tree.html?surname=黄" class="surname-card">
                    <span class="surname-char">黄</span>
                    <span class="surname-desc">江夏黄氏</span>
                </a>
                <a href="family-tree.html?surname=周" class="surname-card">
                    <span class="surname-char">周</span>
                    <span class="surname-desc">汝南周氏</span>
                </a>
                <a href="family-tree.html?surname=吴" class="surname-card">
                    <span class="surname-char">吴</span>
                    <span class="surname-desc">江浙大姓</span>
                </a>
                <a href="family-tree.html?surname=徐" class="surname-card">
                    <span class="surname-char">徐</span>
                    <span class="surname-desc">东海徐氏</span>
                </a>
                <a href="family-tree.html?surname=孙" class="surname-card">
                    <span class="surname-char">孙</span>
                    <span class="surname-desc">乐安孙氏</span>
                </a>
                <a href="family-tree.html?all=true" class="surname-card view-all">
                    <span class="surname-char">👀</span>
                    <span class="surname-desc">查看全部姓氏</span>
                </a>
            </div>
        </section>

        <!-- 网站功能介绍 -->
        <section class="site-features">
            <h2>网站功能介绍</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📚</div>
                    <h3>姓氏知识库</h3>
                    <p>探索各姓氏的起源、迁徙历史、郡望堂号、家族名人等丰富内容</p>
                    <a href="family-tree.html">探索知识库 →</a>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🏆</div>
                    <h3>当代族人</h3>
                    <p>收录各姓氏上市公司控股人及其他领域杰出人才的详细资料</p>
                    <a href="person-detail.html">查看当代族人 →</a>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📰</div>
                    <h3>最新消息</h3>
                    <p>通过福帮手系统追踪收录人物和相关企业的最新动态和新闻</p>
                    <a href="news.html">浏览最新消息 →</a>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔍</div>
                    <h3>姓氏分布</h3>
                    <p>查看各姓氏在中国及全球的分布情况和人口数据统计</p>
                    <a href="family-tree.html#distribution">查看分布地图 →</a>
                </div>
            </div>
        </section>

        <!-- 精选内容 -->
        <section class="featured-content">
            <h2>精选内容</h2>
            <div class="content-tabs">
                <button class="tab-btn active" onclick="switchTab('personages')">特色人物</button>
                <button class="tab-btn" onclick="switchTab('news')">最新消息</button>
            </div>
            
            <div id="personages-tab" class="tab-content active">
                <div class="personage-grid">
                    <!-- 这里将通过JavaScript动态加载人物卡片 -->
                </div>
            </div>
            
            <div id="news-tab" class="tab-content">
                <div class="news-list">
                    <!-- 这里将通过JavaScript动态加载最新消息 -->
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>姓氏百科致力于记录和传承中国姓氏文化，连接历史与现代。</p>
            </div>
            <div class="footer-section">
                <h3>联系方式</h3>
                <p>邮箱: contact@xingshibaike.com</p>
            </div>
            <div class="footer-section">
                <h3>关注我们</h3>
                <div class="social-links">
                    <a href="#">微信公众号</a>
                    <a href="#">微博</a>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 姓氏百科 版权所有</p>
        </div>
    </footer>
</body>
</html>